<template>
	<view>
		<view class="boxbook">
		    <view class="cover-page" >
		      <image class="book" style="width: 150rpx;" mode="widthFix" src="你的图片地址"></image>
		    </view>
		    <view class="inside-page"></view>
		    <view class="inside-page"></view>
		    <view class="inside-page"></view>
		    <view class="inside-page"></view>
		    <view class="end-page"></view>
		  </view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import html2canvas from "html2canvas"
	export default {
		name: "two",
		data() {
			return {
				src:"",
			};
		},
		computed: {
			...mapState([
				'openOff'
			])
		},
		mounted() {
			var context = uni.createCanvasContext('firstCanvas')
			context.setStrokeStyle("#00ff00")
			context.setLineWidth(5)
			context.rect(0, 0, 200, 200)
			context.stroke()
			context.setStrokeStyle("#ff0000")
			context.setLineWidth(2)
			context.moveTo(160, 100)
			context.arc(100, 100, 60, 0, 2 * Math.PI, true)
			context.moveTo(140, 100)
			context.arc(100, 100, 40, 0, Math.PI, false)
			context.moveTo(85, 80)
			context.arc(80, 80, 5, 0, 2 * Math.PI, true)
			context.moveTo(125, 80)
			context.arc(120, 80, 5, 0, 2 * Math.PI, true)
			context.stroke()
			context.drawImage(
				"https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1946d250-4f28-11eb-8a36-ebb87efcf8c0.png", 0, 0,
				200, 200)
			context.draw()
			uni.canvasToTempFilePath({
				x: 100,
				y: 200,
				width: 50,
				height: 50,
				destWidth: 100,
				destHeight: 100,
				canvasId: 'firstCanvas',
				success: function(res) {
					this.src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1946d250-4f28-11eb-8a36-ebb87efcf8c0.png"
					// 在H5平台下，tempFilePath 为 base64
					console.log(res.tempFilePath)
				}
			})

		},
		methods: {
			openTalk() {
				// #ifdef APP-PLUS
				var main = plus.android.runtimeMainActivity();
				var pkName = main.getPackageName();
				var uid = main.getApplicationInfo().plusGetAttribute("uid");
				var Intent = plus.android.importClass('android.content.Intent');
				var Build = plus.android.importClass("android.os.Build");

				if (Build.VERSION.SDK_INT >= 26) {
					var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
					intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
				} else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0  
					var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
					intent.putExtra("app_package", pkName);
					intent.putExtra("app_uid", uid);
				} else { //(<21)其他--跳转到该应用管理的详情页
					var Settings = plus.android.importClass("android.provider.Settings");
					var Uri = plus.android.importClass("android.net.Uri");
					var intent = new Intent();
					intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
					var uri = Uri.fromParts("package", main.getPackageName(), null);
					intent.setData(uri);
				}
				// 跳转到该应用的系统通知设置页  
				main.startActivity(intent);
				// #endif
			}
		}
	}
</script>

<style>
/*boxbook定义书的长宽大小的*/
.boxbook {
  width: 150rpx;
  height: 220rpx;
  margin-left: 300rpx;
}
.boxbook view {
  position: absolute;
  /*给所有view绝对定位*/
  border-radius: 0 8rpx 8rpx 0;
  /*圆角属性*/
  box-shadow: 0 1rpx 20rpx 5rpx rgba(0, 0, 0, 0.08);
  /*书页的阴影*/
}
/*给封面添加渐变背景和大小*/
.cover-page {
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(bottom left, #7083ff, #75a1ff);
  background-image: linear-gradient(to top right, #7083ff, #75a1ff);
}
/*给封底页添加渐变属性和大小*/
.end-page {
  background-image: -webkit-linear-gradient(bottom left, #6e9aff, #5d7bff);
  background-image: linear-gradient(to top right, #6e9aff, #5d7bff);
  width: 100%;
  height: 100%;
}
/*给内容页添大小定位以及默认底色和边框*/
.inside-page {
  width: 96%;
  height: 96%;
  left: 0;
  top: 2%;
  border: 1px lightgray solid;
  background-color: #fcf9f4;
}
/*开启css中的3D*/
.boxbook {
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.boxbook view {
	/*旋转方向向左 详细解释在下面*/
	/*-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。*/
  -webkit-transform-origin: left;
          transform-origin: left;
}
/* nth-of-type(*)是选择器匹配同类型中的第n个同级兄弟元素-从1开始 */
.boxbook view:nth-of-type(1) {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.boxbook view:nth-of-type(2) {
  -webkit-transform: rotateY(5deg);
          transform: rotateY(5deg);
}
.boxbook view:nth-of-type(3) {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg);
}
.boxbook view:nth-of-type(4) {
  -webkit-transform: rotateY(15deg);
          transform: rotateY(15deg);
}
.boxbook view:nth-of-type(5) {
  -webkit-transform: rotateY(20deg);
          transform: rotateY(20deg);
}
.boxbook view:nth-of-type(6) {
  -webkit-transform: rotateY(25deg);
          transform: rotateY(25deg);
}

/*鼠标离开页面回翻的旋转时间*/
.boxbook view:nth-of-type(1) {
  -webkit-transition: 1s;
  transition: 1s;
}
.boxbook view:nth-of-type(2) {
  -webkit-transition: 0.9s;
  transition: 0.9s;
}
.boxbook view:nth-of-type(3) {
  -webkit-transition: 0.8s;
  transition: 0.8s;
}
.boxbook view:nth-of-type(4) {
  -webkit-transition: 0.7s;
  transition: 0.7s;
}
.boxbook view:nth-of-type(5) {
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.boxbook view:nth-of-type(6) {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*鼠标悬停时的旋转角度和旋转时间*/
.boxbook:hover view:nth-of-type(1) {
  -webkit-transform: rotateY(-160deg);
          transform: rotateY(-160deg);
  -webkit-transition: 1s;
  transition: 1s;
}
.boxbook:hover view:nth-of-type(2) {
  -webkit-transform: rotateY(-150deg);
          transform: rotateY(-150deg);
  -webkit-transition: 1.3s;
  transition: 1.3s;
}
.boxbook:hover view:nth-of-type(3) {
  -webkit-transform: rotateY(-140deg);
          transform: rotateY(-140deg);
  -webkit-transition: 1.5s;
  transition: 1.5s;
}
.boxbook:hover view:nth-of-type(4) {
  -webkit-transform: rotateY(-130deg);
          transform: rotateY(-130deg);
  -webkit-transition: 1.7s;
  transition: 1.7s;
}
.boxbook:hover view:nth-of-type(5) {
  -webkit-transform: rotateY(-1deg);
          transform: rotateY(-1deg);
  -webkit-transition: 1.75s;
  transition: 1.75s;
}
.boxbook:hover view:nth-of-type(6) {
  -webkit-transform: rotateY(-100deg);
          transform: rotateY(-100deg);
  -webkit-transition: 1.85s;
  transition: 1.85s;
}

</style>
